<template>
  <div :id="id" class="shadow"></div>
</template>

<script>
import tdTheme from "./theme.json"; // 引入默认主题
// import echartsResize from "@/mixins/echartsResize.js";

import * as echarts from "echarts";
import { onMounted, onBeforeUnmount } from "vue";
// import { debounce } from "@/utils/index.js";

export default {
  name: "Echarts",
  // mixins: [echartsResize],
  props: {
    id: {
      type: String,
      default: "chart"
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    let chart = null;
    const initChart = () => {
      let dom = document.querySelector(`#${props.id}`);

      chart = echarts.init(dom, tdTheme);
      chart.setOption(props.options);
    };

    onMounted(() => {
      echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
      initChart();

      // echarts 自适应窗口
      const echartsResize = () => {
        // 防抖
        setTimeout(() => {
          chart.resize();
        }, 300);
      };
      window.addEventListener("resize", echartsResize);
    });

    // onBeforeUnmount(() => {
    //   window.removeEventListener("resize", echartsResize);
    // });
    return {
      chart
    };
  }
};
</script>